<template>
  <div class="backGround">
    <Circles ref="circle" :nextSongObj="nextSongObj" />
    <LyricLyric ref="ric" :indexs="indexs" :timeArr="timeArr" :Lyric="Lyric" />
    <Progress :progresswidth="progresswidth" :timestart="timestart" :timeend="timeend" />
    <playList @nextSong="nextSong" @previousSong="previousSong" @clickPlay="clickPlay" />
    <audio
      :loop="loop"
      @ended="ended"
      @timeupdate="timeupdates"
      ref="audio"
      id="myAudio"
      style="width: 100%"
      :src="url"
    ></audio>
  </div>
</template>

<script>
import { Toast } from "vant";
import Vue from "vue";
Vue.use(Toast);
import { mapState, mapMutations } from "vuex";
import Circles from "./components/circle";
import Progress from "../common/progress";
import playList from "./components/playlist";
import LyricLyric from "./components/lyric";
import { format } from 'js/common.js'
import {
  songListFindMusic,
  songListFindLyric
} from "../../../api/recommendMusic";
export default {
  data() {
    return {
      url: "",
      Lyrics: [],
      time: [],
      // 时间数组
      timeArr: [],
      // 歌词数组
      Lyric: [],
      indexs: 0,
      nextSongObj: {},
      loop: false,
      timestart: "",
      timeend: "",
      // 进度条长度
      progresswidth: 0
    };
  },
  mounted() {
    this.nextSongObj = this.songObj;
    let id = this.$route.params.id;
    this.findMusic(id);
    this.findLyric(id);
  },
  methods: {
    // 查找音乐
    findMusic(ids) {
      songListFindMusic(ids).then(res => {
        let {
          data: { data }
        } = res;
        this.url = data[0].url;
      });
    },
    // 查找歌词
    findLyric(ids) {
      songListFindLyric(ids).then(res => {
        this.time = [];
        this.timeArr = [];
        let {
          data: {
            lrc: { lyric }
          }
        } = res;
        this.Lyrics = lyric.split("\n");
        let Lyric = lyric.split("\n"),
          // eslint-disable-next-line no-unused-vars
          length = Lyric.length;
        let LyricNew = [];
        for (let i = 0; i < Lyric.length; i++) {
          this.time.push(Lyric[i].slice(1, 9));
          LyricNew.push(Lyric[i].replace(/[0123456789.:]/g, "").slice(2));
        }
        this.Lyric = LyricNew;
        this.time.map(item => {
          if (item) {
            let arr = item.slice(1, 5).split(":");
            let seconds = Number(arr[0] * 60) + Number(arr[1]);
            this.timeArr.push(seconds);
          }
        });
      });
    },
    // 点击播放按钮
    clickPlay(showStatus) {
      // this.setTimes()
      if (!showStatus) {
          this.$refs.audio.play();
        this.$refs.circle.animateSelector.style.webkitAnimationPlayState =
          "running";
      } else {
        this.$refs.audio.pause();
        this.$refs.circle.animateSelector.style.webkitAnimationPlayState =
          "paused";
      }
    },
    // 伴随时间给歌曲匹配歌词
    timeupdates() {
    //   this.progressWidth = Math.round(
    //     (this.$refs.audio.currentTime / this.$refs.audio.duration) * 720
    //   );
      this.progresswidth = this.$refs.audio.currentTime / this.$refs.audio.duration
      this.timestart = format(this.$refs.audio.currentTime);
      this.$refs.audio.duration
        ? (this.timeend = format(this.$refs.audio.duration))
        : "";
      if (this.$refs.audio.currentTime) {
        var i = this.$refs.audio.currentTime.toString().indexOf(".");
        var time = Number(this.$refs.audio.currentTime.toString().slice(0, i));
        this.timeArr.map((item, index) => {
          if (item === time) {
            this.$refs.ric.lyric = this.Lyric[index];
          }
        });
      }
    },
    // 歌曲结束时在正常状态下切换下一首歌曲
    ended() {
      if (this.index < this.songLists.length) {
        this.selectSong(this.index + 1);
        this.$store.commit("songList/MUSIC_LIST_INDEX", this.index + 1);
        this.$refs.circle.animateSelector.style.webkitAnimationPlayState =
          "running";
        setTimeout(() => {
          this.$refs.audio.play();
        }, 2000);
      } else {
        this.$store.commit("songList/MUSIC_LIST_INDEX", 0);
        this.selectSong(this.index);
        this.$refs.circle.animateSelector.style.webkitAnimationPlayState =
          "pause";
        setTimeout(() => {
          this.$refs.audio.pause();
        }, 2000);
      }
    },
    // 点击上一曲
    previousSong() {
      if (this.index > 0) {
        this.selectSong(this.index - 1);
        this.$store.commit("songList/MUSIC_LIST_INDEX", this.index - 1);
        this.$refs.circle.animateSelector.style.webkitAnimationPlayState =
          "running";
        setTimeout(() => {
          this.$refs.audio.play();
        }, 2000);
      } else {
        Toast("已经是第一首了呢，亲");
      }
    },
    // 点击下一曲
    nextSong() {
      if (this.index < this.songLists.length) {
        this.selectSong(this.index + 1);
        this.$store.commit("songList/MUSIC_LIST_INDEX", this.index + 1);
        this.$refs.circle.animateSelector.style.webkitAnimationPlayState =
          "running";
        setTimeout(() => {
          this.$refs.audio.play();
        }, 2000);
      }
    },
    // 封装一个调用歌曲的方法 一个文件中会用很多次
    selectSong(index) {
      this.nextSongObj = this.songLists[index];
      let id = this.songLists[index].id;
      this.findMusic(id);
      this.findLyric(id);
      this.$refs.audio.load();
    },
    ...mapMutations(["songList/MUSIC_LIST_INDEX"])
  },
  computed: {
    ...mapState("songList", {
      songObj: "songObj", // 映射 this.localCount 为 this.$store.state.helloWorld.count,
      index: "index",
      songLists: "songLists"
    })
  },
  components: {
    Circles,
    Progress,
    playList,
    LyricLyric
  }
};
</script>
<style lang="scss">
.van-toast {
  font-size: 45px;
  line-height: 90px;
  padding: 0 30px;
}
</style>

<style lang="scss" scoped>
.backGround {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 150;
  background: #222;
}
</style>
